import { VNode, createVNode, Ref } from 'vue'
import {
  NRadioButton,
  NRadioGroup,
  NCheckboxGroup,
  NSpace,
  NCheckbox,
  NSelect,
  NSwitch,
  NInput,
  NDatePicker,
  NDynamicTags,
  DynamicTagsProps,
  InputNumberProps,
  NInputNumber,
  NTreeSelect,
  NRadio,
} from 'naive-ui'
import {
  CreateCheckboxParams,
  CreateRadioParams,
  CreateSelectParams,
  CreatedSwitchParams,
  CreatedInputParams,
  useCreateDatePicker as useCreateDatePickerInt,
  CreateTreeSelectParams,
} from '@/interfaces/hooks'
import { Value as SelectValue } from 'naive-ui/lib/select/src/interface'

export const useCreateRadioGroup = ({
  refState,
  radioOptions,
  radioPropsOptions,
}: CreateRadioParams): VNode => {
  return createVNode(
    NRadioGroup,
    {
      ...radioPropsOptions,
      value: refState.value,
      onUpdateValue(newValue: string | number | null | undefined) {
        refState.value = newValue
      },
    },
    {
      default: () => {
        return createVNode(
          NSpace,
          {},
          {
            default: () => {
              return radioOptions.map((item) => {
                return createVNode(
                  NRadio,
                  {
                    ...item,
                  },
                  {
                    default: () => item.label,
                  }
                )
              })
            },
          }
        )
      },
    }
  )
}

export const useCreateRadioGroupButton = ({
  refState,
  radioOptions,
  radioPropsOptions,
}: CreateRadioParams): VNode => {
  return createVNode(
    NRadioGroup,
    {
      ...radioPropsOptions,
      value: refState.value,
      onUpdateValue(newValue: string | number | null | undefined) {
        refState.value = newValue
      },
    },
    {
      default: () => {
        return createVNode(
          NSpace,
          {},
          {
            default: () => {
              return radioOptions.map((item) => {
                return createVNode(
                  NRadioButton,
                  {
                    ...item,
                  },
                  {
                    default: () => item.label,
                  }
                )
              })
            },
          }
        )
      },
    }
  )
}

export const useCreateCheckboxGroup = ({
  refState,
  checkboxOptions,
  checkboxPropsOptions,
}: CreateCheckboxParams): VNode => {
  return createVNode(
    NCheckboxGroup,
    {
      ...checkboxPropsOptions,
      value: refState.value,
      onUpdateValue(newValue: string | number | null | undefined) {
        refState.value = newValue
      },
    },
    {
      default: () => {
        return createVNode(
          NSpace,
          {},
          {
            default: () =>
              checkboxOptions.map((item) =>
                createVNode(NCheckbox, {
                  ...item,
                })
              ),
          }
        )
      },
    }
  )
}

export const useCreateSelect = ({
  refState,
  selectOptions,
  selectpropsOptions,
}: CreateSelectParams): VNode => {
  return createVNode(NSelect, {
    options: selectOptions,
    value: refState.value,
    ...selectpropsOptions,
    onUpdateValue(newValue: SelectValue) {
      refState.value = newValue
    },
  })
}

export const useCreateTreeSelect = ({
  refState,
  treeSelectOptions,
  treeSelectPropsOptions,
}: CreateTreeSelectParams): VNode => {
  return createVNode(NTreeSelect, {
    options: treeSelectOptions,
    value: refState.value,
    ...treeSelectPropsOptions,
    onUpdateValue(newValue: any) {
      console.log(newValue)
      refState.value = newValue
    },
  })
}

export function useCreatedSwitch({ refState, switchOptions }: CreatedSwitchParams) {
  return createVNode(NSwitch, {
    value: refState.value,
    onUpdateValue: (newVal: boolean) => {
      refState.value = newVal
    },
    ...switchOptions,
  })
}

export const useCreateInput = ({ inputPropsOptions, refState }: CreatedInputParams): VNode => {
  return createVNode(NInput, {
    ...inputPropsOptions,
    value: refState.value,
    onUpdateValue(newValue: string) {
      refState.value = newValue
    },
  })
}

export const useCreateDatePicker = ({
  datePickerPropsOptions,
  refState,
}: useCreateDatePickerInt) => {
  return createVNode(NDatePicker, {
    value: refState.value,
    ...datePickerPropsOptions,
    onUpdateValue(newValue: string) {
      refState.value = newValue
    },
  })
}

export const useCreateDynamicTags = ({
  refState,
  dynamicTagsProps,
}: {
  refState: Ref<string[]>
  dynamicTagsProps: DynamicTagsProps
}) => {
  return createVNode(NDynamicTags, {
    value: refState.value,
    ...dynamicTagsProps,
    onUpdateValue(newValue: string[]) {
      refState.value = newValue
    },
  })
}

export const useCreateInputNumber = ({
  refState,
  inputNumberPropsOptions,
}: {
  refState: Ref<number>
  inputNumberPropsOptions: InputNumberProps
}) => {
  return createVNode(NInputNumber, {
    value: refState.value,
    ...inputNumberPropsOptions,
    onUpdateValue(newValue: number) {
      refState.value = newValue
    },
  })
}
